<script >
  import NewRegister from "@/views/lending/form/NewRegister.vue";

  export default {
    name: "FromShowCard",
    components: {NewRegister}
  }
</script>
<script  setup >
import {
  inject,
  onMounted, onUnmounted, provide,
  ref,

} from "vue";
import lendingRegisterApi from "@/views/lending/Api/lendingRegisterApi";
import BorrowingAuditApi from "@/views/lending/Api/BorrowingAuditApi";

import BorrowingReturnApi from "@/views/lending/Api/BorrowingReturnApi";
import router from "@/router";
import CryptoJS from "crypto-js"
// 导入加密库
//定义
//lendingRegister:接受父组件传递的组件名
const lendingModuleName = ref('')
//mainFormField:获取父组件传递的表单字段值
const mainFormField =  inject("mainFormField")
//recordStatusValue:病案状态的值规则控制
const recordStatusValue = inject("recordStatusValue")
//recordStatusColor:病案状态的值颜色规则控制
const recordStatusColor = inject("recordStatusColor")
//rightShow:控制各组件所支持的功能规则
const rightValue = inject("rightValue")
//rightShow:控制各组键所支持的功能展示规则
const rightShow = inject("rightShow")
//rightColor:控制各组件所支持功能的颜色展示规则
const rightColor = inject("rightColor")
//fieldShow:字段展示控制
const catControlShow=inject("catControlShow")

//registerButton:判断是否为病案登记页面
const registerButton = ref(false)
//catSecretKey:查看秘钥
let catSecretKey = ref('')


//insertRegisterButton:控制新建病案登记按钮
const insertRegisterButton = ref(false)

//registerArr:保存病案登记表所有全量数据
const dataArr = ref([])
//mainFormFieldValue:获取主表单值并回显
const mainFormFieldValue = (value)=>{
  let name = ref('')
  mainFormField.value.forEach((item)=>{
    for (const key in item){
      if (key === value){
          name.value = item[value]
        return
      }
    }
  })
  return name.value
}
//方法
//fromComponent:判断组件出处
const fromComponent = (componentName)=>{
  if(componentName === 'LendingRegisterView'){
    mainFormDataGetRegister()
    return registerButton.value = true
  }
  if(componentName === 'BorrowingAuditView'){
    mainFormDataGetAudit()
    return registerButton.value = false
  }
  if (componentName === 'BorrowingReturnView'){
    mainFormDataGetReturn()
    return registerButton.value = false
  }

};

//recordStatusComputed:病案状态转换
const recordStatusComputed = ()=>{
  let name = ref('')
  //获取当前组件对应病案状态的字段名
  mainFormField.value.forEach((item)=>{
    if (item['病案状态'] ){
      name.value = item['病案状态']
    }
  })
  //处理当前数据
  dataArr.value.forEach((dataItem)=> {
    let temp = dataItem[name.value]
    //获取当前组件对应病案状态的复制规则
    recordStatusValue.value.forEach((recordItem)=>{
      for (const key in recordItem){
        if (recordItem[temp] !== undefined){
          temp = recordItem[temp]
        }
      }
       //根据规则进行病案状态的复制修改
       dataItem[name.value] = temp
    })
  })

}

//rightButton:新建病案登记窗口触发
const rightButton = ()=>{
  insertRegisterButton.value = true
}


//getRowColor:控制颜色展示的规则实现
const getRowColor  = (column,tarColor)=>{
  let tempColor = ref('')
  tarColor.forEach((item)=>{
    for (const key in item){
      if (key === column){
        return tempColor.value = item[column]
      }
    }
  })
  return tempColor.value
}
//isGetShow:控制组件展示的规则实现
const isGetShow = (name,value,tarShow)=>{
    const temp = ref(false)
    tarShow.forEach((item)=>{
       for (const keys in item){
         if(keys === name){
           item[keys].forEach((item) =>{
              if(item === value){
                temp.value = item === value
              }
           })
         }
       }
  })
  return temp.value
}
//mainFormDataGetRegister:发送主表单信息
const mainFormDataGetRegister = ()=>{
  lendingRegisterApi.selectAll().then(
      (response)=>{
        dataArr.value = response.data.data
        recordStatusComputed()
      },
      (err)=>{
        console.log(err.message)}
  )
}
//mainFormDataGetAudit
const mainFormDataGetAudit = ()=>{
  BorrowingAuditApi.selectAll().then(
      (response)=>{
        dataArr.value=response.data.data
        console.log(response.data.data)
        recordStatusComputed()
      },
      (err)=>{
        console.log(err.message)}
  )
}
//mainFormDataGetReturn
const mainFormDataGetReturn = ()=>{

  BorrowingReturnApi.selectAll().then(
      (response)=>{
        dataArr.value=response.data.data
        console.log(response.data.data)
        recordStatusComputed()
      },
      (err)=>{
        console.log(err.message)}
  )
}
//goToAssembly:跳转组件
const goToAssembly = (value,id)=>{
  console.log(id)
  //约定:[0]是url,[1]秘钥,[2]数据或者功能
  let catUrl = catControlShow[0].value
  catSecretKey = catControlShow[1]
  let catFiled =   catControlShow[2]
  let temp = getCryptoJS(catFiled)
  saveSession()
  if (value === "查看" || value === "审核"){
    router.push({path:catUrl, query:{temp,id}})
  }
  if (value === "编辑"){
    router.push('/lending/lendingRegister/compile')
  }
  if (value === ""){

  }


}


//getCryptoJS：路径传值的加密处理
function getCryptoJS(data){
  return CryptoJS.AES.encrypt(data,catSecretKey.value).toString();
}
//saveSession:秘钥传值SecretKey
function saveSession(){
  sessionStorage.setItem('catSecretKey',catSecretKey.value)
}

//生命周期
//onMounted：初始化按钮，判断组件的展示
onMounted(()=>{
  lendingModuleName.value = inject("LendingWhoView")
   fromComponent(lendingModuleName.value)
})



</script>
<template>
  <NewRegister v-model="insertRegisterButton"/>
  <router-view></router-view>
<!--  <CatMedicalRecord v-model="catButton"/>-->
  <el-card style="margin: 20px">
    <div style="height:5vh;padding:5px 20px;background-color:#fff;">
      <el-button v-show = "registerButton" type="primary" @click="rightButton"
                 style="float: right;margin:1px;">新增登记</el-button>
    </div>
    <el-table margin :data="dataArr" style="width: 100%; margin-top:1px;"  :header-cell-style="{backgroundColor: '#F2F2F2FE'}">

      <el-table-column fixed :prop="mainFormFieldValue('病案号')" label="病案号" width="120" />
      <el-table-column :prop="mainFormFieldValue('住院号')" label="住院号" width="120" />
      <el-table-column :prop="mainFormFieldValue('患者姓名')" label="患者姓名" width="120" />
      <el-table-column :prop="mainFormFieldValue('借阅人')" label="借阅人" width="120" />
      <el-table-column :prop="mainFormFieldValue('借阅日期')" label="借阅日期" width="120" />
      <el-table-column :prop="mainFormFieldValue('归还日期')" label="归还日期" width="120" />
      <el-table-column  label="病案状态" width="120" >
        <template #default="scope">
          <span :style="getRowColor(scope.row[mainFormFieldValue('病案状态')],recordStatusColor)">{{ scope.row[mainFormFieldValue('病案状态')] }}</span>
        </template>
      </el-table-column>
      <el-table-column :prop="mainFormFieldValue('登记时间')" label="登记时间" width="120" />
      <el-table-column :prop="mainFormFieldValue('操作员')" label="操作员" width="120" />
      <el-table-column :prop="mainFormFieldValue('借阅原因')" label="借阅原因" width="120" />


      <el-table-column style="display: flex" fixed="right" label="操作" min-width="180">
        <template #default="scope">

            <button @click="goToAssembly(item,scope.row[mainFormFieldValue('id')])" v-show="isGetShow(scope.row[mainFormFieldValue('病案状态')],item,rightShow)"
                    style="border: none; background: none;"
                    v-for="(item,index) in rightValue" :key="index">
              <span :style="getRowColor(item,rightColor)">{{item}}</span>
            </button>

        </template>
      </el-table-column>

    </el-table>

  </el-card>

</template>

<style scoped>

</style>